<template>
  <div class="xfbody">
    <div class="xingfang">
      <div class="t">
        <span>
          <a href="" target="_blank" id="t_01">新房</a>
        </span>
        <span>
          <a href="" target="" id="t_02">地图找新房</a>
        </span>
      </div>
      <div class="xklp">
        <div class="lpbt">
          <a href="" target="_blank">新开楼盘</a>
        </div>
        <div class="xfdate">
          <div style="overflow:scroll; height:400px; width:225px;">
            <ul class="gdlb">
              <li v-for="item in xlkp_list" :key="item">
                <div class="time"></div>
                <div>
                  <span id="riqi">{{item.riqi}}</span>
                  <p id="jj">
                    <a href="" target="_blank">{{item.mingcheng}}</a>
                    <span>{{item.jiage}}</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 展示图片 -->
    <div class="zhanshi">
      <div class="tit">
        <div class="s1">
          <span><a href="">人气楼盘</a></span>
        </div>
        <div class="s2">
          <span><a href="">置业优选</a></span>
        </div>
        <div class="s2">
          <span><a href="">特价房</a></span>
        </div>
        <div class="s2">
          <span><a href="">优质楼盘</a></span>
        </div>
        <div class="s2">
          <span><a href="">海外房产</a></span>
        </div>
        <div class="s2">
          <span><a href="">商铺新盘</a></span>
        </div>
      </div>
      <div class="lbt">
        <div class="block">
          <el-carousel height="150px">
            <el-carousel-item v-for="item in img_list" :key="item">
              <h3 class="small"><img :src="item" /></h3>
            </el-carousel-item>
          </el-carousel>
          <div class="allimg">
            <div class="images">
              <div>
                <img src="../../../images/tj1.jpg" />
              </div>
              <div class="zm">
                <span>价格代定</span>
                <a id="lj" href="" target="_blank">查看详情</a>
                <div id="t2">
                  <div><a href="" target="_blank">待售</a></div>
                  <div><a href="" target="_blank">普通住宅</a></div>
                </div>
              </div>
            </div>
            <div class="images">
              <div>
                <img src="../../../images/tj1.jpg" />
              </div>
              <div class="zm">
                <span>价格代定</span>
                <a id="lj" href="" target="_blank">查看详情</a>
                <div id="t2">
                  <div><a href="" target="_blank">待售</a></div>
                  <div><a href="" target="_blank">普通住宅</a></div>
                </div>
              </div>
            </div>
            <div class="images">
              <div>
                <img src="../../../images/tj1.jpg" />
              </div>
              <div class="zm">
                <span>价格代定</span>
                <a id="lj" href="" target="_blank">查看详情</a>
                <div id="t2">
                  <div><a href="" target="_blank">待售</a></div>
                  <div><a href="" target="_blank">普通住宅</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        xlkp_list: [{
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
          {
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
          {
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
          {
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
          {
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
          {
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
          {
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
          {
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
          {
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
          {
            riqi: "01月16日",
            mingcheng: "京北.金茂悦",
            jiage: "17000/平方米"
          },
        ],
        img_list: [
          "../../../images/tj1.jpg", "../../../images/tj2.jpg", "../../../images/tj3.jpg"
        ]
      };
    },
    methods: {

    }
  };
</script>

<style lang="css" scoped="scoped">
  .xfbody {
    height: 510px;
    margin-top: 100px;
    margin-left: 160px;
  }

  .xingfang {
    width: 225px;
    height: 505px;
  }

  .xingfang a {
    text-decoration: none;
    color: black;

  }

  .xingfang a:hover {
    text-decoration: inherit;
    color: #DE3438;
    text-decoration: underline;
  }

  .t {
    width: 220px;
    height: 50px;
    background-color: #F3F3F3;
    margin: 0;
    text-align: center;
    line-height: 2;
  }

  #t_01 {
    font-weight: bold;
    font-size: 25px;

  }

  #t_02 {
    font-size: 10px;
    margin-left: 30px;
  }

  .lpbt {
    width: 200px;
    height: 30px;
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
  }

  #riqi {
    width: 85px;
    height: 20px;
    background-color: #DDDDDD;
    font-size: 12px;
  }

  #jj a {
    font-size: 15px;
  }

  #jj span {
    font-size: 10px;
    margin-left: 10px;
  }

  /* 展示部分*/
  .zhanshi a {
    text-decoration: none;
    color: black;

  }

  .tit a:hover {
    color: #DE3438;

  }

  .zhanshi {
    width: 990px;
    height: 50px;
    background-color: #F3F3F3;
    margin-left: 220px;
    margin-top: -505px;
  }

  .zhanshi .tit div {
    display: inline-block;
    margin-left: 30px;
  }

  .zhanshi .tit div span {
    text-align: center;
    line-height: 3;

  }

  /* 轮播图*/
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .lbt {
    width: 630px;
    height: 250px;
    margin-left: 20px;
    margin-top: 20px;
  }
  .images {
    margin-top: 30px;
    display: inline-block;
  }

  .images img {
    width: 205px;
    height: 136px;
  }

  #t2 div {
    display: inline-block;
    width: 58px;
    height: 22px;
    border: solid #DDDDDD 1px;
    font-size: 12px;
    background-color: ;
    text-align: center;
    line-height: 2;
    margin-top: 10px;

  }

  .zm span {
    color: #DE3438;
  }

  .zm #lj {
    margin-left: 60px;
  }

  .zm #lj:hover {
    color: #DE3438;
  }
</style>
